<template>
  <div class="wrapper">
    <ht-table
      :defaultEventKey="defaultEventKey"
      ref="dataTable"
      :initData="false"
      :multiSelect="false"
      :dictMap="dictMap"
      :queryParams="queryParams"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
      :reqConfig="reqConfig"
      :showRightToolbar="false"
    >
      <template v-slot:operate>
        <el-table-column
          :label="$t('common.operate')"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <ht-button-group
              :buttonList="[
                {
                  label: $t('common.edit'),
                  permission: '',
                  visible: !disabled,
                  doFunc: () => {
                    handleAction('update', scope.row);
                  },
                },
                {
                  label: $t('common.delete'),
                  permission: '',
                  visible: !disabled,
                  doFunc: () => {
                    handleAction('del', scope.row);
                  },
                },
              ]"
            />
          </template>
        </el-table-column>
      </template>
    </ht-table>
    <edit-kv
      :paramKey="paramKey"
      :paramType="paramType"
      ref="editKvDialog"
      @editComplete="editComplete"
    />
  </div>
</template>

<script>
import { kvApiUrlConfig, delKv } from "@/api/batch_app/kvParam";
import { listPageMixin } from "@/libs/listPageMixin";
import EditKv from "@/views/batch/components/kvConfig/components/EditKv";
export default {
  name: "KvConfig",
  mixins: [listPageMixin],
  components: {
    EditKv,
  },
  props: {
    paramKey: {
      type: String,
      default: 1,
    },
    paramType: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    disabled: {
      handler(data) {
        this.opButtonList = () => {
          return this.opBtnList();
        };
      },
    },
  },
  data() {
    return {
      defaultEventKey: "kv",
      open: false,
      reqConfig: kvApiUrlConfig,
      queryParams: {
        typeParamId: "",
        paramType: "",
      },
      tableBindColumns: [
        { label: `ID`, prop: "id", visible: false },
        {
          label: this.$t("batch.systemConfig.form.paramKey"),
          prop: "paramKey",
        },
        {
          label: this.$t("batch.systemConfig.form.paramValue"),
          prop: "paramValue",
        },
      ],
      opButtonList: () => {
        return this.opBtnList();
      },
    };
  },
  methods: {
    opBtnList() {
      return [
        {
          label: this.$t("common.add"),
          type: "primary",
          icon: "el-icon-plus",
          permission: "",
          visible: !this.disabled,
          actionType: "add",
          clickFun: () => {
            this.handleAction("add");
          },
        },
      ];
    },
    // 手动加载数据
    loadData(typeParamId) {
      console.log("typeParamId", typeParamId);
      if (typeParamId) {
        this.$set(this.queryParams, "typeParamId", typeParamId);
        this.$set(this.queryParams, "paramType", this.paramType);
        this.$nextTick(() => {
          this.doQuery(this.defaultEventKey);
        });
      }
    },
    handleAction(type, row = {}) {
      switch (type) {
        case "add":
          this.$refs.editKvDialog.show(
            "",
            this.queryParams["typeParamId"],
            false
          );
          break;
        case "del":
          this.$confirm(
            this.$t("batch.systemConfig.rules.sureDelete"),
            this.$t("common.warning"),
            {
              confirmButtonText: this.$t("common.confirm"),
              cancelButtonText: this.$t("common.cancel"),
              type: "warning",
            }
          )
            .then(function () {
              return delKv(row.id);
            })
            .then(() => {
              this.doQuery(this.defaultEventKey);
              this.msgSuccess(this.$t("common.deleteSuccess"));
            })
            .catch((action) => {});
          break;
        case "update":
          this.$refs.editKvDialog.show(
            row.id,
            this.queryParams["typeParamId"],
            true
          );
          break;
      }
    },
    close() {
      this.open = false;
    },
    editComplete(state) {
      if (state) {
        // 编辑完成，刷新列表数据
        this.doQuery(this.defaultEventKey);
      }
    },
  },
};
</script>

<style scoped>
.wrapper {
  height: 100%;
}
</style>
